/*
 * @Descripttion: 自定义指令：拖拽 v-draggable
 * @Author: 66
 * @Date: 2020-12-15 16:25:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-05-07 09:12:33
 * @1.设置需要拖拽的元素为相对定位，父元素为绝对定位
 * @2.鼠标按下 onmousedown 时记录目标元素当前的left和top值
 * @3.鼠标移动 onmousemove 时计算每次移动的横向距离和纵向距离变化值，改变元素的left和top
 * @4.鼠标松开 onmouseup 时完成一次拖拽
 */
const draggable = {
  inserted: function (el) {
    el.style.cursor = 'move'
    el.onmousedown = function (e) {
      let disx = e.pageX - el.offsetLeft
      let disy = e.pageY - el.offsetTop
      document.onmousemove = function (e) {
        let x = e.pageX - disx
        let y = e.pageY - disy
        let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
        let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }

        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }

        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  },
}
export default draggable
